<div id="app" v-cloak>
    <div class="flex-column flex-content-center">
        <div class="padding20">
            <el-scrollbar height="84vh" width="100%">
                <el-form :model="form" ref="form" :rules="rules" label-width="auto" style="width: 700px;margin-top: 20px">
                    <el-form-item label="插件名" prop="name">
                        <el-input v-model="form.name" placeholder="请填写插件名，字母加_"/>
                    </el-form-item>
                    <el-form-item label="中文名" prop="title">
                        <el-input v-model="form.title" placeholder="请填写中文名"/>
                    </el-form-item>
                    <el-form-item label="插件类型" prop="type">
                        <el-select v-model="form.type" placeholder="请选择">
                            <el-option
                                    key="addons"
                                    label="插件[addons下]"
                                    value="addons">
                            </el-option>
                            <el-option
                                    key="app"
                                    label="应用[app下]"
                                    value="app">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="介绍" prop="intro">
                        <el-input type="textarea" :rows="3" v-model="form.intro" placeholder="请填写介绍"/>
                    </el-form-item>
                    <el-form-item label="作者" prop="author">
                        <el-input v-model="form.author" placeholder="请填写作者"/>
                    </el-form-item>
                    <el-form-item label="作者网站" prop="website">
                        <el-input v-model="form.website" placeholder="请填写作者网站"/>
                    </el-form-item>
                    <el-form-item label="自动路由" prop="autorouter">
                        <el-switch
                                v-model="form.autorouter"
                                active-value="1"
                                inactive-value="0"
                                active-color="#13ce66"
                                inactive-color="#ff4949"
                                style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
                        >
                        </el-switch>
                    </el-form-item>
                    <el-form-item label="版本号" prop="version">
                        <el-input v-model="form.version" placeholder="请填写版本号"/>
                    </el-form-item>
                    <el-form-item label="依赖" prop="require">
                        <el-select v-model="form.require" multiple  placeholder="请选择">
                            <el-option
                                    v-for="item in modules"
                                    :key="item.name"
                                    :label="item.title"
                                    :value="item.name">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-form>
            </el-scrollbar>
        </div>
        <div class="flex-row top10 flex-content-end">
            <div style="width: 95%">
                <el-button type="primary" @click="onSubmit" color="#626aef">保存</el-button>
                <el-button  @click="handleCancel">取消</el-button>
            </div>
        </div>
    </div>
</div>
